<template>
	<view>
		<view class="helmet">
			<view class="sercah_mater">
				<view class="sercah_ipt">
					<u-icon color="#999999" size="28" name="search" style="margin-right: 16rpx"></u-icon>
					<u-input height="40rpx" v-model="value" :type="type" @input="searchFn" input-align="left"
						placeholder-style="fontSize:28rpx;color: #999999;" placeholder="请输车牌号" />
				</view>
			</view>

		</view>
		<view class="bslist-c-box" >
			<view class="bslist-c">
				<view class="money" v-if="recordType==2&&dayQualityData">
					<view class="">
						<text>今日应收</text>
						<text style="color: #333;">{{dayQualityData.total||'0'}}</text>
					</view>
					<view class="">
						<text>今日实收</text>
						<text style="color: #F16757;">{{dayQualityData.received||'0'}}</text>
					</view>
					<view class="">
						<text>今日代扣</text>
						<text style="color: #333;">{{dayQualityData.free||'0'}}</text>
					</view>
				</view>
				<mescroll-body class="water_scroll" ref="mescrollRef" @init="mescrollInit" :down="downOption"
					@down="downCallback" @up="upCallback">
					<view class="bslist-col xb-card" v-for="(item, index) in dataList" :key="index">
						<view class="bslist-col-t">
							<view class="plate">
								<text style="margin-right: 20rpx;">{{item.plateId}}</text>
								<text v-if="recordType==='0'" class="fontB">车主 ({{item.carownName}})</text>
								<text v-if="recordType==='2'|| recordType === '1'" class="fontR">{{item.plateType}}</text>
							</view>
							<view class="">
								<text v-if="recordType === '0' || recordType === '3'">{{item.parkName}}</text>
								<text v-if="recordType === '1' || recordType === '2'">{{item.parkingName}}</text>
							</view>
						</view>
						<view class="bslist-col-c" v-if="recordType==='0' || recordType === '3'">
							<text>{{item.beginDate }} 至 {{item.endDate }}</text>
							<text v-if="recordType === '0'">免费车</text>
							<text v-if="recordType === '3'" style="color: #F16757;">￥{{item.rechargeAmount}}</text>
						</view>
						<view class="bslist-col-b" v-if="recordType==='2' || recordType==='1'">
							<text>{{recordType==='1'?item.portNameIn:'进场时间'}}</text>
							<text>{{item.accessTime}}</text>
						</view>
						<view class="bslist-col-b" v-if="recordType==='2'">
							<text>出场时间</text>
							<text>{{item.accessTimeOut}}</text>
						</view>
						<view class="bslist-col-b fontB" v-if="recordType==='2'">
							<text>应收 ￥{{item.amountSpaid||'0'}}</text>
							<text>代扣 ￥{{item.daikouAmount||'0'}}</text>
							<text style="color: #F16757;">实收 ￥{{item.amountSpaid||'0'}}</text>
						</view>
						<view class="bslist-col-b" v-if="(recordType==='0' || recordType === '3')&&item.enterpriseName">
							<text class="fontC">{{item.enterpriseName}}</text>
							<text></text>
						</view>
					</view>
				</mescroll-body>
			</view>
		</view>
		<u-select value-name="value" cancel-color="#999999" confirm-color="#0581fd" label-name="label" v-model="show"
			:list="list" @confirm="confirm"></u-select>
		<u-select value-name="parkId" cancel-color="#999999" confirm-color="#0581fd" label-name="parkName"
			v-model="parkshow" :list="parklist" @confirm="parkconfirm"></u-select>
	</view>
</template>

<script>
	import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
	export default {
		mixins: [MescrollMixin], // 使用mixin
		data() {
			return {
				show: false,
				list: [{
						value: '0',
						label: '临停车'
					},
					{
						value: '1',
						label: '月租车'
					}
				],
				parkshow: false,
				parklist: [],
				tabIndex: 0,
				downOption: {
					page: {
						num: 0,
						size: 10,
						time: null,
					},
					auto: false, //是否在初始化后,自动执行downCallback; 默认true
				},
				dataList: [],
				stateList: "0",
				dayQualityData:null,
				recordType: '0',
				// 输入框
				value: '',
				type: 'text',
				border: true,
				pamlease: '',
				pamleaseType: '',
				searchVal: '',
				parkId: '',
				plateType:'',
        scMargin:''
			};
		},
		onLoad(op) {
			this.apis.parkingApi.dayQualityData().then((res) => {
				this.dayQualityData=res.data
			});
			this.recordType=op.recordType
			this.getTitle(this.recordType)
		},
		onShow() {
			this.dataList = [];
			if (this.mescroll) {
				this.mescroll.resetUpScroll();
			}
			this.getList()
		},
		methods: {
			getList() {
				this.apis.parkingApi.tcParkList().then((res) => {
					this.parklist = res.rows
				})
			},
			getTitle(title) {
				let newTitle = ''
				if (title == 0) {
					newTitle = '免费车辆'
          this.scMargin="margin-top: 110rpx;"
				} else if (title == 1) {
          this.scMargin="margin-top: 110rpx;"
					newTitle = '进场信息'
				} else if (title == 2) {
          this.scMargin="margin-top: 110rpx;"
					newTitle = '出场信息'
				}else if(title == 3){
					newTitle = '月租车辆'
          this.scMargin="margin-top: 110rpx;"
				}
				uni.setNavigationBarTitle({
					title: newTitle
				});
			},
			changeTab(index) {
				this.tabIndex = index;
				if (index == 0) {
					this.parkshow = true
				} else if (index == 2) {
					this.pamlease = '1'
					this.dataList = [];
					this.mescroll.resetUpScroll();
				} else if (index == 1) {
					this.pamlease = '0'
					this.dataList = [];
					this.mescroll.resetUpScroll();
				} else if (index == 3) {
					this.pamlease = ''
					this.show = true
				}
			},
			confirm(e) {
				this.pamleaseType = e[0].label
				this.dataList = [];
				this.mescroll.resetUpScroll();
			},
			parkconfirm(e) {
				this.parkId = e[0].value
				this.dataList = [];
				this.mescroll.resetUpScroll();
			},
			// 搜索车牌号
			searchFn(e) {
				this.dataList = [];
				this.searchVal = e;
				clearTimeout(this.searchTimout);
				this.searchTimout = setTimeout(() => {
					this.mescroll.resetUpScroll();
				}, 1000);
			},
			closeSelctFn() {
				this.searchVal = '';
				this.dataList = [];
				this.value = '';
				this.mescroll.resetUpScroll();
			},
			itemClick(item) {
				this.$store.commit("repair/setRepairInfo", item);
				this.navTo("/pages/repair/infor/infor");
			},
			/*下拉刷新的回调 */
			downCallback() {
				this.pamlease = ''
				this.pamleaseType = ''
				this.searchVal = ''
				this.dataList = [];
				this.mescroll.resetUpScroll();
				this.tabIndex = 0
			},
			/*上拉加载的回调: 其中page.num:当前页 从1开始, page.size:每页数据条数,默认10 */
			upCallback(page) {
				//联网加载数据
				if (this.recordType == 0 || this.recordType == 3) {

					if(this.recordType == 0){
						this.plateType = '免费车'
					}else{
						this.plateType = '月租车'
					}
					this.apis.parkingApi.tcCarWxList({
							pageNum: page.num,
							pageSize: page.size,
							leaseState: this.pamlease,
							leaseType: this.pamleaseType,
							plateId: this.searchVal,
							parkId: this.parkId,
							plateType: this.plateType
						})
						.then((res) => {
							this.dataList = this.dataList.concat(res.rows);
							this.mescroll.endBySize(res.rows.length, res.total);
						})
						.catch(() => {
							//联网失败的回调,隐藏下拉刷新的状态
							this.mescroll.endErr();
						});
				} else if (this.recordType == 1) {
					this.apis.parkingApi.tcInWxList({
							pageNum: page.num,
							pageSize: page.size,
							plateId: this.value,
						})
						.then((res) => {
							console.log('111')
							this.dataList = this.dataList.concat(res.rows);
							this.mescroll.endBySize(res.rows.length, res.total);
						})
						.catch(() => {
							//联网失败的回调,隐藏下拉刷新的状态
							this.mescroll.endErr();
						});

				} else if (this.recordType == 2) {
					this.apis.parkingApi.tcOutWxList({
							pageNum: page.num,
							pageSize: page.size,
							plateId: this.value,
						})
						.then((res) => {
							console.log('222')
							this.dataList = this.dataList.concat(res.rows);
							this.mescroll.endBySize(res.rows.length, res.total);
						})
						.catch(() => {
							//联网失败的回调,隐藏下拉刷新的状态
							this.mescroll.endErr();
						});

				}
			},
		},
	};
</script>

<style lang="scss" scoped="">
	.money {
		margin-bottom: 15px;
		display: flex;
		justify-content: space-between;
		border-radius: 12rpx;

		view:nth-child(1) {
			margin-right: 20rpx;
		}

		view:nth-child(2) {
			margin-right: 20rpx;
		}

		view {
			display: flex;
			flex-direction: column;
			padding: 30rpx 0 30rpx 34rpx;
			width: 33%;
			background: #FFFFFF;
			border-radius: 12rpx;

			text:first-child {
				font-size: 26rpx;
				color: #666666;
				line-height: 36rpx;
				margin-bottom: 8rpx;
			}

			text:last-child {
				font-size: 44rpx;
				font-weight: 500;
				color: red;
			}
		}
	}

	page {
		padding: 0;
	}

	.helmet {
		position: fixed;
		width: 100%;
		z-index: 9;
		top: 0;

		/* #ifdef H5 */
		top: 88rpx;

		/* #endif */
		.sercah_mater {
			background: #ffffff;
			padding: 20rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;

			.sercah_ipt {
				width: 100%;
				background: #f5f5f5;
				display: flex;
				justify-content: flex-start;
				border-radius: 12rpx;
				padding-left: 20rpx;
				padding: 16rpx 0 16rpx 20rpx;
			}

			/deep/ .u-input {
				width: 100%;
			}

			text {
				display: block;
				width: 56rpx;
				font-size: 28rpx;
				color: #666666;
			}
		}

		.water_t {
			z-index: 2;
			padding: 22rpx 40rpx;
			background: #ffffff;
			display: flex;

			.water_col {
				box-sizing: border-box;
				min-width: 152rpx;
				margin-left: 20rpx;
				height: 46rpx;
				background: #f2f2f2;
				border-radius: 24rpx;
				font-size: 24rpx;
				font-family: PingFang-SC-Medium, PingFang-SC;
				font-weight: 500;
				color: #333333;
				@include flexCenter;

				&:first-child {
					margin-left: 0;
				}
			}

			.water_t_ac {
				background: rgba(68, 217, 75, 0.1);
				border: 1rpx solid #44d94b;
				color: #44d94b;
			}
		}



	}

	.bslist-c-box {
    margin-top: 110rpx;
		padding: 20rpx;

		.bslist-c {
			.bslist-col {
				box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.06);
				margin-bottom: 20rpx;
				padding: 26rpx 32rpx;

				view {
					display: flex;
					justify-content: space-between;
					font-size: 26rpx;
					color: #333333;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					line-height: 36rpx;
					margin-bottom: 20rpx;
				}

				.fontR {
					color: #44D94B;
					font-weight: bold;
				}

				.fontB {
					font-weight: bold;
				}

				.fontC {
					color: #999999;
				}

				.bslist-col-t {
					border-bottom: 1rpx solid #eee;

					view:nth-child(1) {
						padding-bottom: 0rpx;
						font-size: 28rpx !important;
						display: flex;
						align-items: center;
					}

					view:nth-child(2) {
						padding-bottom: 0rpx;
						display: flex;
						align-items: center;
						font-size: 28rpx !important;
					}

					.plate {
						text:nth-child(1) {
							display: inline-block;
							background: #399CF9;
							padding: 6rpx 12rpx;
							color: #FFFFFF;
							border-radius: 12rpx;
						}
					}
				}

				.bslist-col-c {}
			}
		}
	}
</style>
